<template>
    <div class="detail-container">
        <van-nav-bar
            title="详情"
            left-text="返回"
            left-arrow
            @click-left="$router.go(-1)"
            />
        <div class="content">
            <div class="swiper">
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(image, index) in msg.swiperImg" :key="index">
                        <img v-lazy="image" />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="msg">
                <div class="title">{{msg.title}}</div>
                <van-tag plain type="danger" v-for="it in msg.tag" :key="it">{{it}}</van-tag>
                <div class="desc">
                    <div><span>重量：</span>{{msg.weight}}</div>
                    <div><span>描述：</span>{{msg.pdesc}}</div>
                </div>
                <div class="position">
                    <span>猪猪所在地：</span>{{seller.address}}
                </div>
                <div class="detail-img">
                    <img v-for="img in msg.descImg" :key="img" v-lazy="img" />
                </div>
            </div>
        </div>
        
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="评论" @click="$router.push({path: '/product/remark',query: {id}})" />
            <van-goods-action-icon v-if="!msg.collected" icon="star-o" text="加入收藏" @click="collectedChange" />
            <van-goods-action-icon v-if="msg.collected" icon="star" text="加入收藏" @click="collectedChange" />
            <van-goods-action-icon icon="shop-o" text="卖家" @click="$router.push({path: '/seller',query: {id}})" />
            <van-goods-action-button
                type="danger"
                text="联系卖家"
                @click="show = true"
            />
        </van-goods-action>
       <van-action-sheet v-model="show" title="卖家联系方式">
            <div class="content">
                <div>卖家电话： <span>{{seller.phone}}</span> </div>
                <div>卖家微信： <span>{{seller.wx}}</span> </div>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: {},
                address: '',
                show: false,
                seller:{},
                icon_selelct: 'star-o',
            }
        },
        created() {
            //获取商品信息请求
            this.msg = {
                    id: '0024', 
                    title: '优质双月猪', 
                    pdesc:'小猪已满双月，能吃能睡很好养，不挑食', 
                    tag: ['双月猪','山猪'], 
                    weight:'30kg',
                    collected:false,
                    descImg:[
                        'https://img0.baidu.com/it/u=2686241399,3203896439&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=400',
                        'https://img2.baidu.com/it/u=3131845848,233875098&fm=253&fmt=auto&app=138&f=JPEG?w=637&h=500',
                    ],
                    swiperImg: [
                        'https://img0.baidu.com/it/u=2686241399,3203896439&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=400',
                        'https://img2.baidu.com/it/u=3131845848,233875098&fm=253&fmt=auto&app=138&f=JPEG?w=637&h=500',
                    ]}
            //获取卖家信息请求
            this.seller = {address: '贵州省 毕节市 威宁县 草海镇',
                            phone: '18265489875',
                            wx: '15689565748'
            }
            
        } ,
        methods: {
            //收藏商品
            collectedChange() {
                this.msg.collected = !this.msg.collected
                //发送收藏请求
            },
        },

    }
</script>

<style lang="less" scoped>
    @import "../../style/common.less";
    .detail-container{
        width: 100%;
        height: 100%;
        .van-nav-bar{
            background-color: @cco;
            
        }
        >.content{
            height: calc(100% - 96px);
            overflow: auto;
            > .swiper{
                width: 100%;
                height: 230px;
                // background-color: @cdd;
                img{
                    width: 100%;
                    height: 220px;
                }
            }
            > .msg{
                width: 100%;
                height: calc(100% - 230px);
                padding: 8px 12px;
                >.title{
                    font-size: 1rem;
                    font-weight: 500;
                }
                >.van-tag{
                    display: inline-block;
                    margin-right: 6px;
                }
                >.position,
                >.desc{
                    font-size: .7rem;
                    border: 1px solid @cdd;
                    border-radius: 5px;
                    padding: 10px 5px;
                    margin-top: 10px;
                    line-height: 26px;
                    span{
                        color: @cco;
                        font-weight: bold;
                    }
                }
                .position{
                    font-size: .65rem;
                    line-height: 20px;
                }
                .detail-img{
                    width: 100%;
                    padding: 10px 0;
                    img{
                        width: 100%;
                    }
                }
            }
        }
        >.van-popup{
            height: 230px;
            .content {
                padding: 16px 16px 160px;
                font-size: .9rem;
                line-height: 2rem;
                text-align: center;
                height: 100%;
                .van-icon-star-o:before{
                    color: @cco;
                }
            }
        }
        
    }
    
</style>